<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title> {{ .Task.ProjectOptions.PageTitle }} </title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />

    <!-- Bootstrap CSS-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.7-3.3.13/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">

    <!-- Style CSS -->
    <link href="./css/image.css" rel="stylesheet">
</head>

<!-- no text highlighting -->
<body class="noselect" style="display:none">
<p hidden id="label_type">{{ .Task.ProjectOptions.LabelType }}</p>
<p hidden id="item_type">{{ .Task.ProjectOptions.ItemType }}</p>
<div id="keyboard_usage_window">
    <div class="panel panel-default">
        <div class="panel-heading active">
            Keyboard Usage
        </div>
        <br/>
        <div class="key_usage" style="max-height: calc(100vh - 230px); overflow: scroll;">
            <div>
                <p><span><kbd>?</kbd></span>
                    <span>Toggle Keyboard Usage display</span></p>
            </div>
            <div>
                <p><span><kbd>Esc</kbd></span> <span>Deselect label</span>
                </p>
            </div>
            <div>
                <p><span><kbd>&#9003;</kbd></span> <span>Delete selected label</span>
                </p>
            </div>
            <div>
                  <p><span><kbd>&larr;</kbd> / <kbd>&rarr;</kbd></span> <span>Previous/next item</span></p>
            </div>
            <div>
                <p><span><kbd>&uarr;</kbd> / <kbd>&darr;</kbd></span> <span>Bring a selected label forward/backward</span></p>
            </div>
            <div>
                <p><span><kbd>+</kbd> / <kbd>-</kbd> or <kbd>Ctrl+scroll</kbd></span> <span>Zoom in/out</span></p>
            </div>
            <div>
                <p><span><kbd>Ctrl+drag</kbd></span> <span>Drag image when zoomed in</span></p>
            </div>
            <div>
                <p><span><kbd>Ctrl+S</kbd></span> <span>Save the current task</span></p>
            </div>
            <div>
                <p><span><kbd>Ctrl+F</kbd> / <kbd>Ctrl+B</kbd></span> <span>Bring a selected label to front/back</span></p>
            </div>
            <div>
              <p><span><kbd>Ctrl+H</kbd></span> <span>Hiding/showing all labels except the selected label</span></p>
            </div>
            <template id="video_usage">
              <div>
                  <p><span style="vertical-align: top"><kbd>&#9251;</kbd></span> <span>Play/pause the sequence</span></p>
              </div>
              <div>
                  <p><span><kbd>Ctrl+L</kbd></span> <span>Start track linking; <kbd>&#8629;</kbd> when finished</span></p>
              </div>
              <div>
                  <p><span><kbd>Ctrl+E</kbd></span> <span>End track</span></p>
              </div>
            </template>
            <template id="seg_image_usage">
              <div>
                  <p><span><kbd>Ctrl+L</kbd></span> <span>Start linking; <kbd>&#8617;</kbd> when finished</span></p>
              </div>
            </template>
            <template id="seg_usage">
              <div>
                  <p><span><kbd>Ctrl+&#9003;</kbd></span> <span>redraw a selected segmentation label</span></p>
              </div>
              <div>
                  <p><span><kbd>Ctrl+D</kbd></span> <span>Start quick-draw</span></p>
              </div>
              <div>
                  <p><span style="vertical-align: top"><kbd>c</kbd></span> <span>Press and click on the midpoint of an edge in the selected label to change the edge to a bezier curve</span></p>
              </div>
              <div>
                  <p><span style="vertical-align: top"><kbd>d</kbd></span> <span>Press and click on a vertex in the selected label to delete the vertex. While drawing, press to delete the last labeled vertex</span></p>
              </div>
              <div>
                  <p><span><kbd>m</kbd></span> <span>Enable moving a selected segmentation label</span></p>
              </div>
            </template>
            <template id="lane_usage">
              <div>
                  <p><span style="vertical-align: top"><kbd>c</kbd></span> <span>Press and click on the midpoint of an edge in the selected label to change the edge to a bezier curve</span></p>
              </div>
              <div>
                  <p><span style="vertical-align: top"><kbd>d</kbd></span> <span>Press and click on a vertex in the selected label to delete the vertex. While drawing, press to delete the last labeled vertex</span></p>
              </div>
            </template>
        </div>
        <br/>
    </div>
</div>

<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow pull-left">
    <p>
      <div id="page-title" style="position: absolute; float:left; left: 30px;">
        {{ .Task.ProjectOptions.PageTitle }}
        <!--<small class="navbar-small">ver 1.0.1</small>-->
        <span class="navbar-small" id="label-count-title" style="padding-left: 20px">Labels </span>
        <span class="badge badge-pill badge-light counter" id="label-count">0</span>
      </div>
      <div style="position: absolute; float:right; right: 30px;">
          <span class="navbar-small" id="page-count-title" style="padding-left: 5px">Item </span>
          <span class="badge badge-pill badge-light counter" style="padding-right:10px;">
              <span id="page-count" contenteditable="true">0</span>
              <span id="total-page-count">/</span>
          </span>
          <div style="padding-left: 5px;" class="btn-group btn-group-sm">
            <button id="prev-btn" class="btn btn-raised btn-secondary bmd-btn-fab">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button href="#" id="next-btn" class="btn btn-raised btn-secondary bmd-btn-fab">
                <i class="fas fa-chevron-right"></i>
            </button>
          </div>
          <div style="padding-left: 5px;" class="btn-group btn-group-sm">
              <button id="increase-btn" class="btn btn-raised btn-secondary bmd-btn-fab">
                <i class="fas fa-plus"></i>
              </button>
              <button href="#" id="decrease-btn" class="btn btn-raised btn-secondary bmd-btn-fab">
                  <i class="fas fa-minus"></i>
              </button>
          </div>
          <div class="btn-group" style="left: 10px;">
              <a title="Instructions" style="color: #bbbbbb; width: 35px; margin-right: 0.5em;" href="http://data-bdd.berkeley.edu/label/bbox/instruction.html" target="view_window" id="instruction_btn" class="btn btn-info btn-regular"><i class="fas fa-info"></i></a>
              <a title="Keyboard Usage" style="color: #bbbbbb; width: 35px; margin-right: 0.5em;" href="#" id="usage-btn"
                           class="btn btn-secondary"><i class="fas fa-question"></i></a>
              <a title="Dashboard" style="color: #bbbbbb; width: 35px; margin-right: 0.5em;" href="/vendor?project_name={{ .Task.ProjectOptions.Name }}" target="view_window" id="dashboard-btn"
                           class="btn btn-secondary"><i class="fas fa-list"></i></a>
              <a title="Assistant View" style="color: #bbbbbb; width: 35px; margin-right: 0.5em;" href="#" id="assistant-view-btn"
                 class="btn btn-secondary"><i class="fas fa-columns" style="width: 15px; height: 15px"></i></a>
              <a title="Save" style="color: #bbbbbb; width: 35px; margin-right: 0.5em;" href="#" id="save-btn"
                           class="btn btn-secondary"><i class="fas fa-save"></i></a>
              <a title="Submit" style="color: #bbbbbb; width: 35px; margin-right: 0.5em;" href="#" id="submit-btn"
                           class="btn btn-secondary"><i class="fas fa-check"></i></a>
          </div>
  </div>
  </p>
</nav>

<div class="container-fluid main_row" style="position: absolute; left: 0;">
    <div class="row main_row" style="background: #111111">
        <nav class="d-none d-md-block bg-light sidebar" style="width: 200px;">
            <div class="sidebar-sticky" style="width: 200px;">
                <!-- list of control sections -->
                <div style="text-align:center;">
                    <div id="custom_categories" class="form-group">
                        <span>Label Category</span>
                    </div>
                    <div id="custom_attributes">
                        {{ range $key, $value := .Task.ProjectOptions.Attributes }}
                        <div class="form-group"
                             id="custom_attribute_{{ $value.Name }}_div">
                            <input id="custom_attribute_{{ $value.Name }}"
                                   name="custom_attribute_{{ $value.Name }}">
                        </div>
                        {{ end }}
                    </div>
                </div>

                <template id="video_btns">
                    <!-- object out of frame button -->
                    <a href="#" id="end_btn" class="btn btn-sidebar">End
                        Object Track</a>
                    <!-- link two tracks button -->
                    <a href="#" id="track_link_btn" class="btn btn-sidebar">
                        Track-Link
                    </a>
                </template>
                <template id="seg_image_btns">
                    <a href="#" id="link_btn" class="btn btn-sidebar">
                        Link
                    </a>
                </template>
                <template id="seg_btns">
                    <a href="#" id="quickdraw_btn" class="btn btn-sidebar" style="white-space: normal;">
                        Quick-draw
                    </a>
                </template>
                <!-- remove button -->
                <a href="#" id="delete_btn" class="btn btn-sidebar">Remove</a>
            </div>
        </nav>
        <main role="main" class="main_col">
          <div id="div-main">
              <div id="div-canvas">
                  <canvas id="image-canvas">
                      Unsupported browser!
                  </canvas>
                  <canvas id="tag-canvas">
                      Unsupported browser!
                  </canvas>
                  <canvas id="label-canvas">
                      Unsupported browser!
                  </canvas>
                  <canvas id="hidden-canvas">
                      Unsupported browser!
                  </canvas>
                  <div id="crosshair" style="visibility:none">
                      <div id="crosshair-h" class="hair"></div>
                      <div id="crosshair-v" class="hair"></div>
                  </div>
              </div>
              <div id="player-controls" style="visibility:hidden">
                  <!-- frame counter -->
                  <div id="frame_counter"> 1</div>
                  <!-- play/pause button -->
                  <button id="play_button" type="button" class="btn btn-raised btn-primary">
                      <!-- button initializes paused, so use the play icon -->
                      <i id="play_button_icon" class="fa fa-play"></i>
                  </button>
                  <!-- video progress slider -->
                  <input id="video_slider" class="slider" type="range"
                         min="1"
                         max="{{ .Task.NumFrames }}"
                         value="1"/>
              </div>
              <div id="split-bar"></div>
              <div id="div-canvas-assistant">
                  <canvas id="image-canvas-assistant" alt="Assistant view for the latest labelled bounding box">
                      Unsupported browser!
                  </canvas>
                  <canvas id="tag-canvas-assistant">
                      Unsupported browser!
                  </canvas>
                  <canvas id="label-canvas-assistant">
                      Unsupported browser!
                  </canvas>
              </div>
          </div>
        </main>
    </div>
</div>

<!-- TEMPLATE VALUES -->
<i id="frame_rate" class="template-val">{{ .Task.ProjectOptions.VideoMetaData.TBR }}</i>

<!-- JAVASCRIPT -->

<!-- jQuery -->

<!-- Bootstrap JS -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.js"></script>-->

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>-->
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>-->

<!--<script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>-->
<!--<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>-->


<script type="text/javascript">
let labelType = {{ .Task.ProjectOptions.LabelType }};
let itemType = {{ .Task.ProjectOptions.ItemType }};
</script>
<script src="./js/{{ .Task.ProjectOptions.BundleFile }}"></script>

<script>
let isMac = navigator.platform.toUpperCase().indexOf('MAC')>=0;
if (isMac) {
  document.getElementById("keyboard_usage_window").innerHTML =
  document.getElementById("keyboard_usage_window").innerHTML.replace(/Ctrl\+/g, "&#8984;")
}
</script>

</body>

</html>
